<template>
  <div class="coneten">
    <div class="mb-10px">
      <span class="mr-10px">租户: </span>
      <Select
        class="mr-10px"
        allowClear="true"
        v-model:value="formState.tenantCode"
        :options="tenantList.map((tenant) => ({ value: tenant?.tenantCode, label: tenant?.tenantName }))"
        style="width: 200px"
      >
      </Select>

      <span class="mr-10px">应用: </span>
      <Select
        class="mr-10px"
        allowClear="true"
        v-model:value="formState.appId"
        :options="apptList.map((app) => ({ value: app?.appId, label: app?.appName }))"
        style="width: 200px"
      >
      </Select>

      <span class="mr-10px">订单状态: </span>
      <Select
        class="mr-10px"
        allowClear="true"
        v-model:value="formState.orderStatus"
        :options="[
          {
            label: '有效',
            value: 'active',
          },
          {
            label: '无效',
            value: 'invalid',
          },
        ]"
        style="width: 150px"
      >
      </Select>
      <Button class="mr-10px" @click="resetSdr">重置</Button>
      <Button class="mr-10px" type="primary" @click="selectSdr">查询</Button>
    </div>

    <Table
      bordered
      class="main-table"
      :dataSource="sdrList"
      :columns="sdrColumns"
      :pagination="false"
      :loading="loading"
      :scroll="scroll"
    >
      <template #action="{ record }">
        <span v-per="'detail'"> <a @click="onDetail(record)">查看</a></span>
      </template>
    </Table>
    <br />
    <Pagination
      show-size-changer
      v-model:current="current"
      v-model:pageSize="pageSize"
      :total="total"
      :show-total="(total) => `共 ${total} 条`"
      @showSizeChange="onShowSizeChange"
    >
    </Pagination>
    <Detail :detailVisible="showDetail" :record="recordData" @cancelDetail="handleCancel"></Detail>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, watch } from 'vue';
import { Table, Select, Pagination, Button } from 'ant-design-vue';
import { getSdrList } from '/@/api/measurement-center/measurement-sdr/measurementment-sdr';
import { sdrColumns } from './data';
import { appItem, SdrItem, tenantItem } from '/@/api/measurement-center/measurement-sdr/model/sdrModel';
import { getAppList, getTenantList } from '/@/api/measurement-center/measurement-sdr/measurementment-sdr';
import Detail from './component/detail.vue';
const scroll = ref<undefined | object>(undefined);
const loading = ref(true);
let current = ref(1);
const total = ref<number>(0);
const pageSize = ref(10);
interface FormState {
  tenantCode: string;
  appId: string;
  orderStatus: string;
}
const formState: FormState = reactive({
  tenantCode: '',
  appId: '',
  orderStatus: '',
});
const tenantList = ref<Partial<tenantItem[]>>([]);
async function queryTenantList() {
  const res = await getTenantList();
  tenantList.value = res;
}
queryTenantList();
const apptList = ref<Partial<appItem[]>>([]);
async function queryAppList() {
  const res = await getAppList();
  apptList.value = res;
}
queryAppList();
const sdrList = ref<SdrItem[]>([]);
let params = {
  current: current.value,
  size: pageSize.value,
  appId: formState.appId,
  tenantCode: formState.tenantCode,
  orderStatus: formState.orderStatus,
};
async function reload() {
  params = {
    current: current.value,
    size: pageSize.value,
    appId: formState.appId,
    tenantCode: formState.tenantCode,
    orderStatus: formState.orderStatus,
  };
  try {
    let res = await getSdrList(params);
    if (res) {
      total.value = res.total;
      sdrList.value = res.items;
    }
  } finally {
    loading.value = false;
  }
}
reload();
function selectSdr() {
  reload();
}
function resetSdr() {
  current.value = 1;
  pageSize.value = 10;
  formState.appId = '';
  formState.tenantCode = '';
  formState.orderStatus = '';
  reload();
}
const onShowSizeChange = (current: number, pageSize: number) => {
  params.size = pageSize;
  params.current = current;
  reload();
};
watch(pageSize, (val) => {
  if (val > 10) {
    scroll.value = { y: 500 };
  }
  params.size = pageSize.value;
});
watch(current, () => {
  params.current = current.value;
  reload();
});
let showDetail = ref(false);
const recordData = ref({});
function onDetail(record: any) {
  showDetail.value = true;
  recordData.value = record;
}
const handleCancel = () => {
  showDetail.value = false;
};
</script>
<style lang="less">
.header {
  display: flex;
  .select {
    flex: 1;
  }
}
.ant-pagination {
  float: right;
}
</style>
